<template>
  <div class="video-container">
    <div id="player" class="video-player"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  videoObj: {
    type: Object,
    required: true,
  },
});

const player = ref(null);

onMounted(() => {
  // 使用window全局对象来访问AliPlayer
  player.value = new window.Aliplayer({
    id: 'player',
    autoplay: false,
    width: '100%',
    height: '100%',
    vid: props.videoObj.videoMeta.videoId,
    playauth: props.videoObj.playAuth,
    cover: props.videoObj.videoMeta.coverUrl,
    license: {
      domain: 'gongkaotongmeng.com', // 申请 License 时填写的域名
      key: 'IP7mjPjqOZiiJ4XNK0f8af7e13e144433a6e15bdd38c07442', // 申请成功后，在控制台可以看到 License Key
    },
  });
  setTimeout(() => {
    console.log(player.value.getDuration());
    //
    // 监听播放凭证即将过期事件
    player.value.on('PlayAuthWillExpire', () => {
      console.warn('播放凭证即将过期，正在尝试续期...');
    });
  }, 1000);
});
</script>

<style scoped>
#player {
  object-fit: cover;
}
.video-container {
  width: 100%;
  max-width: 1200px;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: 550px;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .video-container {
    height: 240px;
    border-radius: 0;
  }
}
</style>
